import React, { useState, useEffect } from "react";
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
import HomePage from "../pages/HomePage/";
import LoginPage from "../pages/LoginPage/index";
import UserPage from "../pages/UserPage/";
import CarPage from "../pages/CarPage/";
import OrderPage from "../pages/OrderPage/";
import NotFoundPage from "../pages/_404/";
import TopBar from "../components/TopBar/";
import BottomNav from "../components/BottomNav/";
import BasicLayout from "../layout/BasicLayout/";
import PrivateRoute from "./PrivateRoute";

const bottomNav = {};

const routes = [
    {
        path: "/",
        title: "首页",
        isMain: true,
        props: { exact: true },
        component: HomePage
    },
    {
        path: "/login",
        title: "登录",
        component: LoginPage
    },
    {
        path: "/user",
        title: "用户中心",
        isMain: true,
        privateRoute: true,
        component: UserPage
    },
    {
        path: "/cart",
        title: "购物车",
        isMain: true,
        privateRoute: true,
        component: CarPage
    },
    {
        path: "/orderList",
        title: "订单列表",
        isMain: true,
        privateRoute: true,
        component: OrderPage
    },
    {
        path: "/404",
        title: "404",
        component: NotFoundPage
    },
];

// todo 实现topBar的顶部title显示，注意优化，不要重复渲染
export default function Routes (props) {
    console.log('我是路由页面')
    return (
        <Router>
            {/* 能获取到history location match吗，来自context */}
            {/* <BottomNav /> */}
            {/* <Route routes={routes} component={TopBar} /> */}
            <Route component={BottomNav} />
            <Switch>
                {routes.map(item => {
                    const { privateRoute = false } = item
                    return (
                        privateRoute ?
                            <PrivateRoute
                                {...item.props}
                                path={item.path}
                                key={item.path}
                                component={item.component}
                            /> : <Route
                                {...item.props}
                                path={item.path}
                                key={item.path}
                                component={item.component}
                            />
                    );
                })}
                <Redirect to='/404'></Redirect>
            </Switch>
        </Router>
    );
}
